<template>
  <div class="p-t" v-if="specData.length > 0 && specTable.length > 0">
    <table class="el-table" cellspacing="0" cellpadding="0">
      <thead>
        <tr>
          <th class="th-min textc" v-for="(item, index) in specData" :key="index">{{item.text}}</th>
          <template v-for="item in thList">
            <th class="textc" :class="{'pic': item.form == 'pic'}" :key="item.name">{{item.name}}</th>
          </template>
          <th class="textc" v-if="orUse">是否启用</th>
        </tr>
      </thead>
      <tbody v-if="specData[0] && specData[0].values.length">
        <tr :key="index" v-for="(item, index) in SKUNums" class="tr-tbody">
          <template v-for="(n, specIndex) in specData.length">
            <td class="textc" v-if="showTd(specIndex, index)" :key="n" :rowspan="countSum(n)">
              {{ getSpecAttr(specIndex, index) }}
            </td>
          </template>
          <template v-for="item in thList">
            <td class="textc" :class="{'pic': item.form == 'pic'}" :key="item.form" @click="handleUpload(index)">
              <upload
                v-if="item.form == 'pic'"
                :class="{'pic-disabled': !specTable[index].isUse}"
                :images="specTable[index].picArr"
                @upload-change="uploadSuccessRemove"
              />
              <el-input
                v-else
                size="small"
                type="text"
                class="input-center"
                :class="{'input-width': item.form === 'skuNo'}"
                :disabled="!specTable[index].isUse"
                :value="specTable[index][item.form]"
                v-model.number="specTable[index][item.form]"
                @blur="item.form === 'skuNo' ? handleNo(index) : ''"
                oninput ="value=value.replace(/[^0-9.]/g,'')"
              ></el-input>
            </td>
          </template>
          <td v-if="orUse" class="textc">
            <el-switch v-model="specTable[index].isUse"></el-switch>
          </td>
        </tr>
        <!--
        <tr>
          <td colspan="8" class="wh-foot">
            <span class="label">批量设置：</span>
            <template v-if="isSetListShow">
              <template v-for="item in thList">
                <el-button
                  :key="item.name"
                  size="mini"
                  v-if="item.type"
                  @click="openBatch(item.type)"
                >{{item.name}}</el-button>
              </template>
            </template>
            <template v-else>
              <div class="inline-block" v-for="item in thList" :key="item.name">
                <upload
                  v-if="item.type && item.type === 'pic' && currentType === 'pic'"
                  class="pic-all"
                  @upload-change="uploadSuccessRemoveAll"
                />
                <el-input
                  v-else-if="item.type && currentType === item.type"
                  size="mini"
                  style="width: 200px"
                  type="text"
                  :key="item.name"
                  v-model.number="batchValue"
                  :placeholder="item.name"
                  @keyup.native.enter="setBatch"
                ></el-input>
              </div>
              <el-button type="primary" size="mini" @click="setBatch">
                <i class="set-btn blue el-icon-check"></i>
              </el-button>
              <el-button type="danger" size="mini" @click="cancelBatch">
                <i class="set-btn blue el-icon-close"></i>
              </el-button>
            </template>
          </td>
        </tr>
        -->
      </tbody>
    </table>
    <el-dialog :visible.sync="visible">
      <img width="100%" :src="previewUrl"/>
    </el-dialog>
  </div>
</template>

<script type="text/ecmascript-6">
import specMixins from './mixins'
import upload from "../upload"

export default {
  components: {
    upload
  },
  props: {
    orUse: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      isSetListShow: true, // 批量设置状态
      currentType: '', // 批量设置绑定的类型
      batchValue: '', // 批量设置绑定的值
      previewUrl: '',
      visible: false,
      picIndex: 0,
    }
  },
  mixins: [specMixins],
  methods: {
    // 是否显示td
    showTd(specIndex, index) {
      if (!this.specData[specIndex]) {
        return false
      } else if (index % this.countSum(specIndex + 1) === 0) {
        return true
      } else {
        return false
      }
    },
    // 编号
    handleNo(index) {
      // debugger
      const value = this.specTable[index].skuNo
      let isRepet
      this.specTable.forEach((item, i) => {
        if (item.skuNo === value && i !== index) isRepet = true
      })
      console.log("$set", this.$set(this.specTable[index]))
      if (isRepet) this.$set(this.specTable[index], 'skuNo', this.makeProductNoNotRepet(index))
    },
    openBatch(type) {
      this.currentType = type
      this.isSetListShow = false
    },
    // 批量设置
    setBatch() {
      if (typeof this.batchValue === 'string') {
        this.$message({ type: 'warning', message: '请输入正确的值' })
        return
      }
      this.specTable.forEach((item) => {
        if (item.isUse) item[this.currentType] = this.batchValue
      })
      this.cancelBatch()
    },
    cancelBatch() {
      this.batchValue = ''
      this.currentType = ''
      this.isSetListShow = true
    },
    makeProductNoNotRepet(index) {
      // debugger
      let No
      let i = index
      let isRepet = true
      while (isRepet) {
        // No = this.defaultProductNo + i
        No = i
        isRepet = this.isProductNoRepet(No)
        i++
      }
      return No
    },
    isProductNoRepet(No) {
      // debugger
      const result = this.specTable.findIndex((item) => {
        return item.skuNo === No
      })
      return result > -1
    },
    handleUpload(index) {
      this.picIndex = index
    },
    uploadSuccessRemove(o) {
      const { file, fileList } = o
      let arr = []
      fileList.forEach(item => { arr.push(item.response.id) })
      const index = this.picIndex
      this.$set(this.specTable[index], 'pic', arr)
      this.$set(this.specTable[index], 'picArr', fileList)
    },
    uploadSuccessRemoveAll(o) {
      const { file, fileList, type } = o
      if(type == "success") {
        let arr = []
        fileList.forEach(item => { arr.push(item.response.id) })
        this.specTable.forEach(item => {
          item.pic.push(arr)
          item.picArr.push(file)
        })
      } else if(type == "remove") {
        this.specTable.forEach((item, index) => {
          if(item.picArr.length) {
            item.picArr.forEach((im, idx) => {
              if(im.uid === file.uid) {
                this.specTable[index].pic.splice(idx, 1)
                this.specTable[index].picArr.splice(idx, 1)
              }
            })
          }
        })
      }
    }
  },
}
</script>

<style scoped lang="scss">
.p-t {
  margin-top: 30px;
}

th, td {
  text-align: center;
}

>>> {
  .el-input {
    width: 94%;
    margin: 0 3%;
  }
  .wh-foot {
    text-align: left;
  }
}

.input-center {
  width: 90px;
  &.input-width {
    width: auto;
    >>> {
      .el-input__inner {
        text-align: left;
      }
    }
  }
  >>> {
    .el-input__inner {
      text-align: center;
    }
  }
}

.inline-block {
  display: inline-block;
  vertical-align: middle;
}
.pic,
.pic .pic-box {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 150px;
}
.pic,
.pic-all {
  >>> {
    .el-upload-list__item,
    .el-upload {
      width: 62px;
      height: 62px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
.pic {
  >>> {
    .el-upload-list--picture-card {
      display: flex;
      flex-wrap: wrap;
    }
  }
}
.pic-all {
  >>> {
    > div,
    .el-upload-list {
      display: flex;
      align-items: center;
    }
    > div {
      padding-right: 10px;
    }
    .el-upload-list {
      padding-top: 8px;
    }
  }
}

.pic-disabled {
  pointer-events: none;
  cursor: not-allowed;
  >>> {
    .el-upload--picture-card {
      background-color: #F5F7FA;
      border: 1px solid #E4E7ED;
    }
    .el-upload-list__item {
      opacity: 0.6;
      background-color: rgba(0, 0, 0, 0.2);
    }
    .el-icon-plus {
      color: #ccc;
    }
    .el-upload-list__item-status-label {
      background-color: #999;
    }
    .el-icon-upload-success {
      opacity: 0.5;
    }
  }
}
.textc {
  text-align: center;
  padding-left: 3px;
  padding-right: 3px;
}
.th-min {
  min-width: 50px;
}
</style>
